<template>
  <el-tree
    class="filter-tree beauty-scroll"
    :expand-on-click-node="treeObj.expandNode"
    highlight-current
    :check-on-click-node="treeObj.checkNode"
    node-key="id"
    check-strictly
    :data="treeObj.treeData"
    :props="defaultProps"
    default-expand-all
    :filter-node-method="filterNode"
    :current-node-key="currentKey"
    @node-click="onNodeClick"
    @check-change="handleCheckChange"
    ref="tree"
  >
    <span slot-scope="{ data }" class="slot-box">
      <span v-if="data.icon" :class="['iconfont', `icon-${data.icon}`]"></span>
      <span class="label">{{ data.name }}</span>
      <span class="number">{{ data.deptVehicleCount }}</span>
    </span>
  </el-tree>
</template>
<script>
export default {
  name: "DropdownTree",
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: (data, node) => {
          if (node.childNodes.length === 0) {
            return true;
          }
        }
      }
    };
  },
  components: {},
  props: {
    treeObj: {
      type: Object,
      default() {
        return {};
      }
    },
    checkId: {
      type: Number,
      default() {
        return;
      }
    },
    currentKey: null
  },
  mounted() {},
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    onNodeClick(row, node) {
      this.$emit("on", { checked: node.checked, id: row.id, name: row.name });
    },
    handleCheckChange() {
      // console.log(row, checked, node);
    }
  }
};
</script>
<style lang="less" scoped>
.filter-tree {
  height: 100%;
  overflow-x: hidden;
  padding: 16px 34px 16px 16px;

  /deep/ .el-tree-node__content {
    height: 34px;

    .slot-box {
      display: flex;
      align-items: center;
      flex: 1;

      .label {
        margin-left: 6px;
      }

      .number {
        float: right;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #8c8c8c;
        line-height: 17px;
        padding-right: 12px;
      }
    }
  }
}

.el-tree--highlight-current {
  /deep/ .el-tree-node.is-checked > .el-tree-node__content {
    background-color: #3d6cf7;
    background-clip: content-box;
    color: #ffffff;

    .el-tree-node__expand-icon,
    .number {
      color: #ffffff;
    }

    .is-leaf {
      color: transparent;
    }
  }
}
</style>